<template>
  <div
    v-if="detail"
    class="base-info-view"
  >
    <template>
      <div v-if="!(detail.productStatus==='1'&&detail.flowStatus==='REFUSE')">
        <el-alert
          :type="statusType"
          show-icon
          :closable="false"
        >
          {{ getLabel('approval_result',detail.flowStatus) }}
        </el-alert>
      </div>
    </template>
    <el-form
      class="form-detail"
      label-position="right"
      label-width="120px"
      style="padding-left:20px;"
    >
      <el-row
        :gutter="20"
        style="width:100%"
      >
        <el-form-item
          label="计价单位："
          style="width: 25%"
        >
          <div>{{ getLabel('sell_unit', detail.sellUnit) || '无' }}</div>
        </el-form-item>
        <el-form-item
          v-if="notInclude.indexOf('marketPrice')===-1"
          label="市场价："
          style="width: 25%"
        >
          <div><span>{{ detail.marketPrice }}元</span><span v-if="detail.sellUnit">/{{ getLabel('sell_unit', detail.sellUnit) }}</span></div>
        </el-form-item>
        <el-form-item
          label="医保价："
          style="width: 25%"
        >
          <div v-if="detail.medicalInsurancePrice"><span>{{ detail.medicalInsurancePrice }}元</span><span v-if="detail.sellUnit">/{{ getLabel('sell_unit', detail.sellUnit) }}</span></div>
          <div v-else>无</div>
        </el-form-item>
        <el-form-item
          label="剂型："
          style="width: 25%"
        >
          <div v-if="detail.drugForm">{{ getLabel('drug_form', detail.drugForm) }}</div>
          <div v-else>无</div>
        </el-form-item>
        <el-form-item
          label="所属产品线："
          style="width: 25%"
        >
          <div>{{ detail.productLineDetail?.productLineName || '无' }}</div>
        </el-form-item>
        <el-form-item
          label="包装规格："
          style="width: 25%"
        >
          <div>{{ detail.packSpecs }}</div>
        </el-form-item>
        <el-form-item
          label="中包装："
          style="width: 25%"
        >
          <div v-if="detail.mPackNum">{{ detail.mPackNum }}{{ getLabel('sell_unit', detail.sellUnit) }} / {{ getLabel('sell_unit', detail.mPackUnit) }}</div>
          <div v-else>未设置</div>
        </el-form-item>
        <el-form-item
          label="大包装："
          style="width: 25%"
        >
          <div v-if="detail.lPackNum">{{ detail.lPackNum }}{{ getLabel('sell_unit', detail.sellUnit) }} / {{ getLabel('sell_unit', detail.lPackUnit) }}</div>
          <div v-else>未设置</div>
        </el-form-item>
        <el-form-item
          label="产品属性："
          style="width: 25%"
        >
          <div>{{ getLabel('product_attribute', detail.productAttribute)||'无' }}</div>
        </el-form-item>
        <el-form-item
          label="创建人："
          style="width: 25%"
        >
          <div>{{ detail.creatorName||'无' }}</div>
        </el-form-item>
        <el-form-item
          label="创建时间："
          style="width: 25%"
        >
          <div>{{ dateFormat("yyyy-mm-dd HH:MM", detail.createdAt) }}</div>
        </el-form-item>
        <el-form-item
          label="其他描述："
          style="width: 25%"
        >
          <div>{{ detail.remark || '无' }}</div>
        </el-form-item>
      </el-row>

      <el-row
        :gutter="20"
        style="width:100%"
      >
        <el-form-item label="说明书：">
          <div
            v-if="detail.instruction&&detail.instruction.length"
            class="img-container"
          >
            <div
              v-for="(item, index) in detail.instruction"
              :key="item"
              class="img-item"
            >
              <el-image
                :src="item.url"
                :preview-src-list="detail.instruction.map(p=>p.url)"
                :initial-index="1"
              />
            </div>
          </div>
          <div v-else>无</div>
        </el-form-item>
      </el-row>
      <el-row
        :gutter="20"
        style="width:100%"
      >
        <el-form-item label="产品图片：">
          <div
            v-if="detail.images&&detail.images.length"
            class="img-container"
          >
            <div
              v-for="(item, index) in detail.images"
              :key="item"
              class="img-item"
            >
              <el-image
                :src="item.url"
                :preview-src-list="detail.images.map(p=>p.url)"
                :initial-index="1"
              />
            </div>
          </div>
          <div v-else>无</div>
        </el-form-item>
      </el-row>

    </el-form>

  </div>
</template>

<script>
import { onMounted, reactive, toRefs, watch } from 'vue'

export default {
  name: 'BaseInfo',
  props: {
    detailData: {
      type: Object,
      default: () => {},
    },
    notInclude: {
      type: Array,
      default: () => {},
    },
  },
  setup(props, context) {
    var datas = reactive({
      detail: props.detailData,
      statusType: 'warning',
    })

    const getStatusType = () => {
      if (datas.detail?.productStatus === '1') {
        if (datas.flowStatus !== 'AGREE') {
          datas.statusType = 'warning'
        } else {
          datas.statusType = 'success'
        }
      } else if (datas.productStatus === '-1' || datas.productStatus === '-2') {
        datas.statusType = 'warning'
      }
      console.log(datas.statusType)
    }
    watch(
      () => props.detailData,
      (newval, oldval) => {
        if (newval) {
          datas.detail = newval
        }
      },
      { immediate: true }
    )
    onMounted(() => {
      getStatusType()
    })
    return {
      ...toRefs(datas),
    }
  },
}
</script>

<style lang="scss" scoped>
.img-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .img-item {
    width: 150px;
    height: 150px;
    padding: 5px;
    border: 1px solid #e6e6e6;
    border-radius: 5px;
    margin-right: 20px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    .el-image {
      width: 100%;
    }
  }
}
</style>
